<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>乐购商城-登录</title>
    <!-- 注意样式文件引入的顺序 -->
    <!-- 1.重置样式 -->
    <link rel="stylesheet" href="css/reset.css">
    <!-- 2.公共样式 -->
    <link rel="stylesheet" href="css/common.css">
    <!-- 3.当前样式 -->
    <link rel="stylesheet" href="css/login.css">
</head>

<body>
    <!-- header -->
    <div id="header">
        <!-- 顶部 -->
        <div class="top">
            <div class="lego-container">
                <a href="index.html" class="website fl">legochina.cn</a>
                <span class="welcome fr">欢迎光临<a href="index.html">乐购</a>，<span id="loginstatus">请 <a href="login.html">登录</a>\<a href="register.html">注册</a></span></span>                <img src="images/logo_register.jpg" alt="">
            </div>
        </div>
        <div class="login lego-container clearfix">
            <h3 class="fl">欢迎登录</h3>
        </div>
    </div>

    <!-- 主要内容部分 -->
    <div id="content">
        <div class="lego-container">
            <div class="logo-box">
                <div class="method clearfix">
                    <a class="byqrcode fl" href="javascript:void(0);">扫码登录</a>
                    <a class="byinfo fl active" href="javascript:void(0);">账户登录</a>
                </div>
                <!-- 扫码登录 -->
                <div class="scan">
                    <img src="images/show.png" alt="">
                    <img src="images/phone.png" alt="">
                    <p>打开手机版 乐购APP 扫一扫</p>
                </div>
            
                <!-- 账户登录 -->
                <form action="#">
                    <div class="tips">账户名与密码不匹配，请重新输入</div>
                    <p class="username">
                        <img class="previmg" src="images/login_uname.jpg" alt="">
                        <input type="text" name="username" placeholder="账户名">
                        <img class="clearimg" src="images/uname_clear.png" alt="">
                    </p>
                    <p class="password">
                        <img class="previmg" src="images/login_pwd.jpg" alt="">
                        <input type="password" name="password" placeholder="密码">
                    </p>
                    <div class="otherinfo clearfix">
                        <label class="fl"><input type="checkbox" class="autologin"><span>&nbsp;自动登录</span></label>
                        <a class="fr" href="#">忘记密码</a>
                    </div>
                    <button type="button">登&emsp;录</button>
                    <div class="register">
                        <a href="register.html"><img src="images/goto.png" alt=""><span>&nbsp;立即注册</span></a>
                    </div>
                </form>  
            </div>
        </div>
    </div>

    <!-- 尾部 -->
    <footer>
        <div class="links lego-container">
            <a href="#">公司简介</a>|<a href="#">Investor Relations</a>|<a href="#">网站联盟</a>|<a href="#">乐购招商</a>|<a
                href="#">机构销售</a>|<a href="#">手机乐购</a>|<a href="#">官方Blog</a>|<a href="#">热词搜索</a>
        </div>
        <div class="copyright lego-container">
            Copyright (C) 乐购网 2004-2016, All Rights Reserved
        </div>
    </footer>

    <!-- 1. 引入jQuery -->
    <script src="./lib/jquery.min.js"></script>
    <!-- 2. 引入当前页面js文件 -->
    <script src="js/login.js"></script>
    <!-- 3. 引入jQuery表单验证插件 -->
    <script src="lib/jquery.validate.js"></script>
    <!-- 4. 引入获取账号信息的js文件 -->
    <script src="js/account.js"></script>
</body>

</html>